<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts 主体
import resize from './mixins/resize'
import 'echarts-liquidfill'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '250px'
    },
    btDat: {
      type: Object,
      default: () => {
        return {}
      }
    },
    title: {
      type: String,
      default: '信息'
    }
  },
  watch: {
    btDat(name, value) {
      // console.log('传过来的数据--总流量 userMonth',name)
      let num = Math.ceil(this.getPercent(Math.ceil(name.userMonth), Math.ceil(name.monthFlow)))
      this.initChart(name, num / 100)
      // console.log('传过来的数据--总流量',Math.ceil(name.monthFlow), '已使用流量', Math.ceil(name.userMonth), num, '百分比', num / 100)
    }
  },
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.$nextTick(() => { })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart(name, num) {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#fff' // 文字颜色
          },
          formatter: function (value) {
            return '已使用流量: ' + Math.ceil(name.userMonth) + 'G'
          }
        },
        series: [
          {
            type: 'liquidFill',
            name: '流量统计', // 系列名称，用于tooltip的显示，legend 的图例筛选
            radius: '80%', // 水球图的半径
            center: ['50%', '50%'], // 水球图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
            // 水填充图的形状 circle 默认圆形  rect 圆角矩形  triangle 三角形
            // diamond 菱形  pin 水滴状 arrow 箭头状  还可以是svg的path
            shape: 'circle',
            phase: 1, // 波的相位弧度 不设置  默认自动
            direction: 'right', // 波浪移动的速度  两个参数  left 从右往左 right 从左往右
            // waveLength: '400px',//波的长度
            amplitude: 6,//振幅
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 0, // 边框的透明度   默认为 1
                borderWidth: 1, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#232f37', // 边框的阴影颜色,
                borderColor: '#232f37' // 边框颜色
              }
            },
            // 图形样式
            itemStyle: {
              color: {
                colorStops: [{
                  offset: 0, color: 'rgba(0, 221, 255)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(77, 119, 255)' // 100% 处的颜色
                }],
                global: false,
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
              }, // 水球显示的背景颜色
              opacity: 0.9, // 波浪的透明度
              shadowBlur: 20, // 波浪的阴影范围
            },
            backgroundStyle: {
              color: '#666666', // 水球未到的背景颜色
              opacity: 0.1
            },
            // 图形的高亮样式
            emphasis: {
              itemStyle: {
                opacity: 0.9 // 鼠标经过波浪颜色的透明度
              }
            },
            // 图形上的文本标签
            label: {
              fontSize: 12,
              fontWeight: 500,
              color: '#fff',
              formatter: function (value) {
                return `总流量 ${Math.ceil(name.monthFlow)}G - 已使用流量 ${name.userMonth}G`
              },
              //show: false
            },
            data: [num, num - 0.1] // 系列中的数据内容数组
          }
        ]
      })
    },
    getPercent(curNum, totalNum, isHasPercentStr) {
      curNum = parseFloat(curNum);
      totalNum = parseFloat(totalNum);
      if (isNaN(curNum) || isNaN(totalNum)) {
        return '-';
      }
      return isHasPercentStr ?
        totalNum <= 0 ? '0%' : (Math.round(curNum / totalNum * 10000) / 100.00 + '%') :
        totalNum <= 0 ? 0 : (Math.round(curNum / totalNum * 10000) / 100.00);
    },
  }
}
</script>
